<template>
    <div class="bill" ref="wrapper" style="width: 100%">
        <div class="container">
            <div class="date-box">
                <div class="t-b">
                    <span>八月支出</span>
                    <span>2231.13</span>
                </div>
                <div class="t-b r">
                    <span>收入</span>
                    <span>2231.13</span>
                </div>
            </div>
            <div class="time-line">2018-08-10</div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="time-line">2018-08-09</div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="date-box">
                <div class="t-b">
                    <span>七月支出</span>
                    <span>2231.13</span>
                </div>
                <div class="t-b r">
                    <span>收入</span>
                    <span>2231.13</span>
                </div>
            </div>
            <div class="time-line">2018-08-08</div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
            <div class="note-box">
                <div class="type-icon"><i class="iconfont icon-add"></i></div>
                <div class="info-box">
                    <span class="money">50.01</span>
                    <span class="desc o-text">这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的这是浸提爱达爱的</span>
                </div>
                <span class="time">17:09</span>
                <span class="pay">招商信用卡</span>
            </div>
        </div>
        <div class="add-note" @click="dialogVisible = true">
            <i class="iconfont icon-add"></i>
        </div>
        <e-dialog v-model="dialogVisible">
            <div class="pop-content" slot="content">
                <div class="user-input">
                    <e-select v-model="select.label" :options="select.options" :change="select.change"></e-select>
                    <input type="text" @click="moneyKeyVisible = true" placeholder="付款" v-model="money" readonly="readonly" autocomplete="off">
                </div>
                <div class="easy-swiper">
                    <div class="swiper-content" v-touch:index="touchCall">
                        <div class="swiper-box">1</div>
                        <div class="swiper-box">2</div>
                        <div class="swiper-box">3</div>
                        <div class="swiper-box">4</div>
                    </div>
                    <div class="swiper-footer">
                        <span v-for="i in swiper.length" :key="i" :class="{now: i - 1 === swiper.index}"></span>
                    </div>
                </div>
            </div>
        </e-dialog>
        <e-dialog v-model="moneyKeyVisible" style="background: transparent;">
            <e-key-pad v-model="money" slot="content"></e-key-pad>
            <span slot="footer"></span>
        </e-dialog>
    </div>
</template>
<script>
  import ESelect from '../components/e-select'
  import EKeyPad from '../components/e-keypad'
  import EDialog from '../components/e-dialog'
  import BScroll from 'better-scroll'
  // import EScroll from '../components/e-scroll'
  export default {
    name: 'bill',
    components: {
      ESelect, EKeyPad, EDialog
    },
    data: function () {
      return {
        swiper: {
          index: 1,
          length: 4
        },
        moneyKeyVisible: false,
        dialogVisible: false,
        test: {
          row: 3,
          column: 4,
          data: [
            {label: 9},
            {label: 8},
            {label: 7},
            {label: 6},
            {label: 5},
            {label: 4},
            {label: 3},
            {label: 2},
            {label: 1},
            {label: '.', type: 'once'},
            {label: '0'},
            {label: null, type: 'del'},
          ]
        },
        money: 0,
        select: {
          options: [
            {
              value: '选项1',
              label: '现金'
            }, {
              value: '选项2',
              label: '信用卡'
            }, {
              value: '选项3',
              label: '新增'
            }],
          label: '信用卡',
          change: function (item, i) {
            console.log('--item,i--', item, i)
          }
        }
      }
    },
    directives: {
      touch: {
        // 指令的定义
        inserted: function (el, binding) {
          let type = null
          let x
          let index = 0
          el.addEventListener('touchstart', (e) => {
            el.style.transition = 'none'
            x = e.touches[0].clientX
          }, {passive: true})
          el.addEventListener('touchend', (e) => {
            let cx = x - e.changedTouches[0].clientX
            console.log('--cx--', cx)
            if (cx === 0) {
              return false
            }
            if (cx < 0) {
              type = 'right'
              index--
            } else {
              type = 'left'
              index++
            }
            if (index < 0) {
              index = 0
            }
            if (index > 3) {
              index = 3
            }
            el.style.transition = 'all 300ms'
            el.style.transform = `translate3d(${el.clientWidth * -index}px,0,0)`
            binding.value(index)
          }, {passive: true})
          el.addEventListener('touchmove', (e) => {
            e.preventDefault()
            el.style.transition = 'none'
            let cx = x - e.touches[0].clientX
            type = 'left'
            if (cx < 0) {
              type = 'right'
            }
            el.style.transform = `translate3d(${el.clientWidth * -index - cx}px,0,0)`
          }, {passive: false})
        }
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted () {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true
        })
      })
    }, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      touchCall (index) {
        console.log('--type,cx,index--', index)
        this.swiper.index = index
      }
    } // 函数
  }
</script>
<style lang='scss'>
    .easy-swiper {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid #f5f5f5;
        position: relative;
        .swiper-footer {
            display: flex;
            flex-direction: row;
            align-items: center;
            z-index: 3;
            pointer-events: none;
            height: 16px;
            margin-top: -16px;
            > span {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #ccc;
                transition: all 200ms;
                opacity: 0.2;
                margin: 0 4px;
                &.now {
                    background-color: #007aff;
                    opacity: 1;
                }
            }
        }
        .swiper-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            box-sizing: content-box;
            > .swiper-box {
                width: 100%;
                height: 300px;
                flex-shrink: 0;
                background-color: darkgray;
                text-align: center;
                font-size: 20px;
            }
        }
    }

    .pop-content {
        height: 500px;
    }

    .user-input {
        display: flex;
        flex-direction: row;
        align-items: center;
        .e-select {
            width: 6em;
        }
        > input {
            height: 40px;
            border: 1px solid #409eff;
            outline: unset;
            border-radius: 4px;
            box-sizing: border-box;
            padding: 0 1em;
        }
    }

    .add-pop {
        position: fixed;
        z-index: 9;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        .select {
            margin: 20px;
            width: 240px;
            height: 40px;
            border: 1px solid #409eff;
            border-radius: 4px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 1em;
            position: relative;
            > input {
                width: 100%;
                height: 100%;
                border: unset;
                outline: unset;
                padding: unset;
                border-radius: 4px;
            }
        }
        .shadow-box {
            padding: 4px 0;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            border: 1px solid #ebeef5;
            background-color: white;
        }
        .arrow {
            position: relative;
            transition: all 0.4s;
            &::before, &::after {
                content: "";
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border: 6px solid transparent;
                left: calc(50% - 6px);
                top: -6px;
            }
            &::before {
                filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
                border-top-width: 0;
                border-bottom-color: #ebeef5;
            }
            &::after {
                top: -4px;
                border-top-width: 0;
                border-bottom-color: #fff;
            }
            &.x {
                transform: rotate(180deg);
            }
        }
        .select-data {
            @extend .shadow-box;
            @extend .arrow;
            &::before, &::after {
                left: 2em;
            }
            margin: 12px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: absolute;
            top: 100%;
            left: 0;
            margin-left: 0;
            > div {
                height: 30px;
                line-height: 30px;
                width: 100%;
                box-sizing: border-box;
                text-align: left;
                padding-left: 1em;
                color: #606266;
                font-size: 14px;
                &.now {
                    background-color: #f5f7fa;
                    color: #409eff;
                    font-weight: 700;
                }
                &:hover {
                    background-color: #f5f7fa;
                    color: #409eff;
                    font-weight: 700;
                }
            }
        }
    }

    @mixin flex-box($align: center, $justify: space-between,$direction: row) {
        display: flex;
        flex-direction: $direction;
        align-items: $align;
        justify-content: $justify;
    }

    .o-text {
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        text-overflow: ellipsis;
    }

    .bill {
        width: 100%;
        height: 100%;
        .wrapper {
            height: 100%;
        }
        .date-box {
            @include flex-box();
            background-color: #4082a2;
            position: sticky;
            top: 0;
            z-index: 2;
            color: white;
            font-weight: bold;
            height: 90px;
            box-sizing: border-box;
            padding: 0 16px;
            span {
                &:nth-child(1) {
                    font-size: 14px;
                }
                &:nth-child(2) {
                    font-size: 34px;
                }
            }
            .r span {
                font-size: 16px;
            }
        }
        span {
            &.money {
                font-size: 20px;
                font-weight: bold;
            }
            &.desc {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.55);
            }
            &.time {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.55);
                position: absolute;
                top: 4px;
                right: 8px;
            }
            &.pay {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.55);
                position: absolute;
                right: 8px;
                bottom: 4px;
            }
        }
        .t-b {
            @include flex-box(flex-start, $direction: column);
            &.r {
                align-items: flex-end;
                height: 52px;
            }
        }
        .add-note {
            position: fixed;
            bottom: 66px;
            margin-left: -25px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            outline: none;
            background-color: #fa9850;
            z-index: 3;
            i {
                font-size: 22px;
                font-weight: bold;
                color: white;
            }
        }
        .container {
            box-sizing: border-box;
            padding: 16px 0;
        }
        .time-line {
            height: 26px;
            line-height: 26px;
            color: #CCC7C7;
            font-size: 13px;
            margin: 4px 8px;
            position: relative;
            &::before, &::after {
                content: "";
                width: 30%;
                height: 1px;
                background-color: #CCC7C7;
                position: absolute;
                left: 0;
                top: 12px;
            }
            &::after {
                left: unset;
                right: 0;
            }
        }
        .note-box {
            height: 64px;
            @include flex-box($justify: flex-start);
            box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.24);
            padding: 8px;
            margin: 0 8px;
            box-sizing: border-box;
            border-radius: 4px;
            position: relative;
            .type-icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #DDDDDD;
                line-height: 40px;
                flex-shrink: 0;
            }
            .info-box {
                @include flex-box(flex-start, $direction: column);
                flex: 1;
                margin-left: 8px;
                max-width: calc(100% - 8em);
                box-sizing: border-box;
            }
            & + .note-box {
                margin-top: 16px;
            }
        }
    }
</style>
